<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Vue组件</title>
</head>
<body>

<div id="app">
    <h1>{{ name }}</h1>
    <!-- 加载组件，使用组件名作为标签进行加载 -->
    <zujian></zujian>


</div>

<script>
    // 局部组件 变量名就是局部组件名
    var zujian_a = {
        // 指定前端封装的代码片段
        template: '<div>头部代码--局部 <br> 局部组件数据绑定:{{ gender }}  <br> 加载全局组件传递的值:{{ pos }}  <br>  <button v-on:click="isUpload">上传局部数据</button>  </div>',
        // 组件的数据绑定
        data: function () {
            return {'gender': 'boy'}
        },
        // 在局部组件中指定接受全局组件的数据变量
        props: ['pos'],
        // 定义方法
        methods: {
            isUpload: function () {
                alert('触发上传方法');
                this.$emit('data_a', this.gender)
            }
        }
    };
    var zujian_b = {
        // 指定前端封装的代码片段
        template: '<div>底部代码--局部</div>'
    };
    // 全局组件
    Vue.component(
        // 指定组件名称
        'zujian',
        {
            // 指定前端封装的代码片段  渲染局部组件
            template: '<div> <zujian_a v-bind:pos="age"  v-on:data_a="isShow"></zujian_a>全局组件<zujian_b></zujian_b>    <br> 数据绑定值:{{ age }}</div>',
            components: {
                // 注册局部组件
                zujian_a,
                zujian_b
            },
            // 组件的数据绑定
            data: function () {
                // 返回需要绑定的数据
                return {'age': 18}
            },
            methods: {
                isShow: function (data) {
                    alert('接受的数据：' + data)
                }
            }
        }
    );
    new Vue({
        el: '#app',
        data: {
            'name': 'itcast'
        }
    })
</script>

</body>
</html>